<template>
    <div class="content">
        <div class="top_form">
            <el-input v-model="form.username" placeholder="反馈人" class="input1"></el-input>
            <el-input v-model="form.feedtext" placeholder="反馈内容"></el-input>
            <el-date-picker
                    v-model="form.feedtime"
                    type="daterange"
                    align="right"
                    range-separator="至"
                    start-placeholder="开始反馈日期"
                    end-placeholder="结束反馈日期"
                    :picker-options="pickerOptions"
                    class="width-full">
            </el-date-picker>
            <div style="margin-top: 10px;width: 100%">
                <el-input v-model="form.feedresult" placeholder="反馈回复" style="width: 27%"></el-input>
                <el-select
                        style="width: 27%"
                        v-model="form.feedstatus"
                        clearable
                        placeholder="反馈状态">
                    <el-option v-for="item in statusList"
                               :label="item.text"
                               :key="item.value"
                               :value="item.value">
                    </el-option>
                </el-select>
                <el-button id="white_list_search" type="primary" icon="el-icon-search" @click="search" class="button1">搜索</el-button>
                <el-button type="primary" icon="el-icon-edit" @click="reset" class="button3">重置</el-button>
                <el-button type="success" icon="el-icon-document-copy" @click="add" class="button1" v-show="this.type == 2">留言反馈</el-button>
                <el-button id="white_list_del" type="danger" icon="el-icon-delete" @click="del" class="button2" v-show="this.type == 1">批量删除</el-button>
                <el-button id="white_list_add" type="success" icon="el-icon-upload" @click="port" class="button2" v-show="this.type == 1">批量导出</el-button>
            </div>
        </div>
        <div class="contain_form">
            <div class="table">
                <el-table
                        :data="tableData"
                        stripe
                        border
                        v-loading="loading"
                        :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec','text-align':'center'}"
                        style="width: 100%;font-size: 14px;color: #1f2d3d"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            align="center"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="反馈人"
                            align="center"
                            show-overflow-tooltip
                            min-width="10%">
                    </el-table-column>
                    <el-table-column
                            prop="feedtext"
                            label="反馈内容"
                            align="center"
                            show-overflow-tooltip
                            min-width="25%">
                    </el-table-column>
                    <el-table-column
                            prop="feedtime"
                            label="反馈时间"
                            :formatter="dateFormat"
                            align="center"
                            show-overflow-tooltip
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            prop="feedresult"
                            label="服务内容"
                            :formatter="showFormatter"
                            align="center"
                            show-overflow-tooltip
                            min-width="25%">
                    </el-table-column>
                    <el-table-column
                            prop="feedstatus"
                            label="处理状态"
                            :formatter="typeFormatter"
                            show-overflow-tooltip
                            align="center"
                            min-width="10%">
                    </el-table-column>
                    <el-table-column label="服务评分" min-width="21%" v-if="this.type == 1">
                        <template slot-scope="scope" >
                            <!-- <el-rate v-model="scope.row.evaValue" :allow-half="true"  disabled show-score text-color="#ff9900" score-template="{value}"></el-rate> -->
                            <el-rate style="margin-left: 20%"
                                v-model="scope.row.feedscore"
                                @change="handleFeedScore(scope.row)"
                                show-score
                                allow-half
                                disabled
                                :colors="colors"
                                text-color="#ff9900">
                            </el-rate>
                        </template>
                    </el-table-column>
                    <el-table-column label="服务评分" min-width="21%" v-else>
                        <template slot-scope="scope" >
                            <!-- <el-rate v-model="scope.row.evaValue" :allow-half="true"  disabled show-score text-color="#ff9900" score-template="{value}"></el-rate> -->
                            <el-rate style="margin-left: 20%"
                                    v-model="scope.row.feedscore"
                                    @change="handleFeedScore(scope.row)"
                                    show-score
                                    :disabled="scope.row.username == name && scope.row.feedstatus == 1? false : true"
                                    allow-half
                                    :colors="colors"
                                    text-color="#ff9900">
                            </el-rate>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="this.type == 1"
                                     label="操作"
                                     min-width="21%"
                                     align="center">
                        <template slot-scope="scope">
                            <div style="display: flex">
                                <el-button :plain="true"
                                           size="mini"
                                           style="background-color: #fff;font-size: 12px"
                                           @click="edit(scope.row, scope.$index)"
                                >处理</el-button>
                                <el-button :plain="true"
                                           size="mini"
                                           style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                           @click="detail(scope.row)"
                                >详情</el-button>
                                <el-button :plain="true"
                                           size="mini"
                                           style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                           @click="outPort(scope.row)"
                                >导出</el-button>
                                <el-button :plain="true"
                                           size="mini"
                                           style="font-size: 12px;color: black;background-color: #fff"
                                           @click="deleteData(scope.row, scope.$index)"
                                           type="danger">作废
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else
                                     label="操作"
                                     min-width="21%"
                                     align="center">
                        <template slot-scope="scope">
                            <div style="display: flex">
                                <el-button :plain="true"
                                           size="mini"
                                           icon="el-icon-view"
                                           style="color: #62a8ea;background-color: #fff;font-size: 12px;margin-left: 10%"
                                           @click="detail(scope.row)"
                                >查看反馈</el-button>
                                <el-button :plain="true"
                                           size="mini"
                                           :disabled="scope.row.username == name? false : true"
                                           style="font-size: 12px;color: black;background-color: #fff"
                                           icon="el-icon-delete"
                                           @click="deleteData(scope.row, scope.$index)"
                                           type="danger">删除反馈
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange"
                               layout="total, sizes,prev, pager, next, jumper"
                               :current-page.sync="iPagination.current"
                               :page-size='iPagination.pageSize'
                               :page-sizes="iPagination.pageSizeOptions"
                               :total="iPagination.total"
                               background
                               @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
        <feed-dialog ref="feedDialog"></feed-dialog>
        <user-dialog ref="userDialog"></user-dialog>
    </div>
</template>

<script>
    import dateFunc from '@/utils/dateFunc'
    import moment from 'moment'
    import { export2Excel } from '@/utils/util'
    import feedDialog from "./feedDialog";
    import userDialog from "./userDialog"
    export default {
        name: "feedIndex",
        components: {
            feedDialog,
            userDialog
        },
        data(){
            return {
                type: '',
                name: '',
                form: {
                    username: '',
                    feedtext: '',
                    feedtime: '',
                    feedresult: '',
                    feedstatus: '',
                },
                statusList: [
                    {
                        value: 1,
                        text: '已处理'
                    },
                    {
                        value: 2,
                        text: '未处理'
                    }
                ],
                colors: { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' },
                tableData: [],
                multipleSelection: [],
                rows: [],
                loading: false,
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [5, 10, 20, 50, 100],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                columns:[{title:'反馈人',key:'username'}, {title:'反馈内容',key:'feedtext'},
                    {title:'反馈时间',key:'feedtime'}, {title:'服务内容',key:'feedresult'},
                    {title:'处理状态',key:'feedstatus'},{title:'服务评分',key:'feedscore'}
                ],
                status:{
                    1:'已处理',
                    2:'未处理'
                },
                // 时间
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
            }
        },
        created(){
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type;
                    this.name = result.username
                })
            });
        },
        mounted() {
            this.getFeedbackData()
        },
        methods:{
            // 分页导航
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getFeedbackData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getFeedbackData()
            },
            // 获取反馈列表
            getFeedbackData(){
                this.loading = true;
                const params = {...this.form.feedtime};
                console.log(params,33);
                params.startDate = dateFunc.format(params[0],'YYYY-MM-DD');
                params.endDate = dateFunc.format(params[1],'YYYY-MM-DD');
                this.$delete(params, 'feedtime');
                this.$Axios({
                    url: '/poster/getFeedBack',
                    method: 'get',
                    data:{
                        username: this.form.username,
                        feedtext: this.form.feedtext,
                        startDate: params.startDate,
                        endDate: params.endDate,
                        feedresult: this.form.feedresult,
                        feedstatus: this.form.feedstatus,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 搜索
            search(){
                this.iPagination.current = 1;
                this.getFeedbackData()
            },
            // 重置
            reset(){
              this.form={
                  username: '',
                  feedtext: '',
                  feedtime: '',
                  feedresult: '',
                  feedstatus: '',
              };
                  this.search()
            },

            // 选择
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection, 222)
            },
            // 导出
            port(){
                this.$confirm('确定导出excel文件？', '提示', {
                    type: 'warning'
                }).then(()=>{
                    export2Excel(this.columns,this.multipleSelection)
                })
            },

            // 批量删除
            del(){
                if (this.multipleSelection.length != 0){
                    this.$confirm('确定删除选中的反馈内容？','提示',{
                        type: 'warning'
                    }).then(()=>{
                        let ids = [];
                        for (let i = 0; i < this.multipleSelection.length; i++) {
                            ids.push(this.multipleSelection[i].f_id)
                        }
                        this.$axiosToken({
                            url: '/poster/delFeedbackData',
                            method: 'get',
                            data:{ids:ids},
                            success: (result) =>{
                                this.$message({
                                    message: '反馈内容删除成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.getFeedbackData()
                            }
                        }).catch((reason)=>{
                            alert('删除失败'+reason)
                        })
                    })
                }else {
                    this.$alert('请选择要删除的反馈内容', '提示', {
                        confirmButtonText: '确定'
                    })
                }
            },

            // 行内删除
            deleteData(row,index){
                this.$confirm('确定删除该反馈内容？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    this.$axiosToken({
                        url: '/poster/delFeedback',
                        method: 'get',
                        data:{f_id: row.f_id},
                        success: (result) =>{
                            this.$message({
                                message: '删除反馈内容成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getFeedbackData()
                        }
                    }).catch((reason)=>{
                        alert('删除失败'+reason)
                    })
                })
            },

            // 行内导出
            outPort(row){
                let row1 = {
                    username: row.username,
                    feedtext: row.feedtext,
                    feedtime: dateFunc.format(row.feedtime,'YYYY-MM-DD HH:mm:ss'),
                    feedresult: row.feedresult,
                    feedstatus: this.status[row.feedstatus],
                    feedscore: row.feedscore,
                };
                this.rows.push(row1);
                export2Excel(this.columns,this.rows)
            },

            // 处理反馈
            edit(row,index){
                this.$refs.feedDialog.init(row);
                this.$refs.feedDialog.actionType = "edit";
                this.$refs.feedDialog.dialogTableVisible = true
            },

            // 详情
            detail(row){
                this.$refs.feedDialog.init(row);
                this.$refs.feedDialog.actionType = "detail";
                this.$refs.feedDialog.dialogTableVisible = true
            },

            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },
            // 状态转为文字
            typeFormatter(row,column){
                const feedstatus = row.feedstatus
                if (feedstatus == 1){
                    return '已处理'
                }else {
                    return '未处理'
                }
            },

            // 反馈添加
            add(){
                this.$refs.userDialog.dialogFormVisible = true
            },
            // 显示数据状态
            showFormatter(row,column){
                if (row.feedresult == undefined){
                    return '暂无'
                }else {
                    return row.feedresult
                }
            },


            // 用户评分
            handleFeedScore(row){
                console.log(row,'分数')
                this.$axiosToken({
                    url: '/poster/updateScore',
                    method: 'post',
                    data:{
                        f_id: row.f_id,
                        feedscore: row.feedscore
                    },
                    success: (result) =>{
                        this.$message({
                            showClose: true,
                            message: '评分成功',
                            type: 'success',
                            // duration: 2000
                        });
                        this.getFeedbackData()
                    }
                })
            },
        },
    }
</script>

<style scoped>
    .top_form{
        font-size: 14px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        box-sizing: border-box;
        color: #1f2d3d;
        /*font-size: inherit;*/
    }
    /deep/ .el-button--mini, .el-button--mini.is-round{
        padding: 6px 10px;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 4px;
    }
    .el-input:nth-child(1){
        width: 27%;
    }
    .el-input:nth-child(2){
        width: 27%;
        margin-left: 10px;
    }
    .el-input:nth-child(3){
        width: 27%;
        margin-left: 10px;
    }
    .width-full{
        width: 27%;
        margin-left: 10px;
    }
    .el-select{
        width: 18%;
        margin-left: 10px;
    }
    .button1,.button2,.button3{
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
        width: 8%;
        border-radius: 4px;
    }
    .button3{
        color: rgb(255, 255, 255);
        background-color: rgb(247, 186, 42);
        border-color: rgb(247, 186, 42);
    }
    /*.el-button{*/
    /*    margin-left: 10px;*/
    /*    width: 8%;*/
    /*}*/
    .contain_form{
        margin-top: 20px;
    }
    .block{
        text-align: right;
        margin: 20px 0;

    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
</style>